import React from 'react';
import ReactDOM from 'react-dom';
import { Layout, Menu, Icon, Button } from 'antd';
import Clock from '../../components/Clock';

import _GLOBAL from '../../config';

// import _ROUTER from './src/router';

import Router from '../../router';


import 'antd/dist/antd.css';
import './index.scss';

const { Header, Sider, Content, Footer } = Layout;
const { SubMenu } = Menu;

export default class IndexRoute extends React.Component {
	constructor(props){
		super(props);

		this.categorys = [];
		this.state={
			collapsed: false,
		}
	}

	toggleCollapsed = ()=>{
		this.setState({
			collapsed: !this.state.collapsed,
		});
	};

	getCategorys = ()=>{
		let categorys = [],lists=[], _CATEGORYS = _GLOBAL.categorys;

		_CATEGORYS.map((res,index)=>{
			if("lists" in res && res.lists.length != 0){
				res['lists'].map((r,k)=>{
					lists.push(
						<Menu.Item key={'sub-'+index+'-'+k} onClick={() => this.props.history.push('/news')}>
							{ "icon" in r ? <Icon type={r.icon} /> : ""}
							<span>{r.name}</span>
						</Menu.Item>
					)
				})
				categorys.push(
					<SubMenu
						key={'sub-'+index}
						title={
							<span>
								{ "icon" in res ? <Icon type={res.icon} /> : ""}
								<span>{res.name}</span>
							</span>
						}
					>
						{ lists }
					</SubMenu>
				)
			}else{
				categorys.push(
					<Menu.Item key={index}>
						{ "icon" in res ? <Icon type={res.icon} /> : ""}
						<span>{res.name}</span>
					</Menu.Item>
				)
			}
		})

		this.categorys = categorys;
	}

	componentWillMount (){
		this.getCategorys();
		// console.log(_GLOBAL)
	}

	componentDidMount (){
	}

	render(){
		return( 
			<Layout style={{ minHeight: '100vh' }}>
				<Sider collapsible  collapsed={this.state.collapsed} onCollapse={this.toggleCollapsed}>
					<Menu 
						mode="inline" 
						theme="dark" 
						defaultOpenKeys={['sub-1']} 
						defaultSelectedKeys={['0']} 
						style={{ textAlign: "left" }}
					>
						{ this.categorys }
						
					</Menu>
					
				</Sider>
				<Layout>
					<Header  style={{ background: '#fff', padding: 0 }} >Header</Header>
					<Content>
						<div className="h relative">
							<Router />
							<Clock  />
						</div>
					</Content>
					<Footer>Footer</Footer>
				</Layout>
			</Layout>
			
			)
	}
}

// ========================================

// ReactDOM.render(
// 	<ResetInit />,
// 	document.getElementById('root')
// );
